<template>
  <div class="cart-container">
    <div class="cart-header">
      <h1>我的购物车</h1>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="cart-content" v-loading="loading">
      <!-- 未登录提示 -->
      <el-empty
        v-if="!authStore.isLoggedIn"
        description="请先登录才能查看购物车"
        class="empty-cart"
      >
        <template #default>
          <el-button type="primary" @click="$router.push('/auth/login')"> 立即登录 </el-button>
        </template>
      </el-empty>

      <!-- 购物车为空 -->
      <el-empty
        v-else-if="!loading && cartStore.isEmpty"
        description="购物车为空"
        class="empty-cart"
      >
        <template #default>
          <el-button type="primary" @click="$router.push('/products')"> 去购物 </el-button>
        </template>
      </el-empty>

      <!-- 购物车内容 -->
      <div v-else class="cart-section">
        <!-- 购物车列表 -->
        <div class="cart-list">
          <el-table
            ref="cartTable"
            :data="[...cartStore.items]"
            style="width: 100%"
            row-key="cartItemId"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" reserve-selection />
            <el-table-column label="商品" min-width="300">
              <template #default="{ row }">
                <div class="product-info">
                  <img
                    :src="
                      row.shoes?.productImageUrl || row.productImage || '/placeholder-product.jpg'
                    "
                    :alt="row.shoes?.name || row.productName || '商品'"
                    class="product-image"
                  />
                  <div class="product-details">
                    <h3 class="product-name">
                      {{ row.shoes?.name || row.productName || '未知商品' }}
                    </h3>
                    <p class="product-spec">
                      {{ row.color?.colorName || '' }}
                      {{ row.size?.shoeSize || '' }}
                      {{ row.sku || '' }}
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
              <template #default="{ row }">
                <span class="price"
                  >￥{{
                    (row.stock?.discountPrice || row.stock?.price || row.price || 0).toFixed(2)
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="数量" width="150">
              <template #default="{ row }">
                <el-input-number
                  v-model="row.quantity"
                  :min="1"
                  :max="row.stock?.stockQuantity || 999"
                  size="small"
                  @change="
                    (value: number | undefined) => {
                      if (value !== undefined && value !== null && value > 0) {
                        handleQuantityChange(row, value)
                      }
                    }
                  "
                />
              </template>
            </el-table-column>
            <el-table-column label="小计" width="120">
              <template #default="{ row }">
                <span class="subtotal"
                  >￥{{
                    (
                      (row.stock?.discountPrice || row.stock?.price || row.price || 0) *
                      row.quantity
                    ).toFixed(2)
                  }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="handleRemoveItem(row.id || row.cartItemId)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 购物车底部操作 -->
        <div class="cart-footer">
          <div class="cart-actions">
            <el-checkbox
              v-model="selectAll"
              :indeterminate="isIndeterminate"
              @change="(val: any) => handleSelectAll(val === true)"
            >
              全选
            </el-checkbox>
            <el-button type="text" @click="handleClearInvalidItems"> 清除失效商品 </el-button>
            <el-button type="text" @click="handleClearCart"> 清空购物车 </el-button>
          </div>

          <div class="cart-summary">
            <div class="summary-item">
              <span>已选商品：</span>
              <span class="highlight">{{ selectedItemsCount }}件</span>
            </div>
            <div class="summary-item">
              <span>商品总价：</span>
              <span class="price">￥{{ selectedItemsTotal.toFixed(2) }}</span>
            </div>
            <div class="summary-item" v-if="discountAmount > 0">
              <span>优惠金额：</span>
              <span class="discount">-￥{{ discountAmount.toFixed(2) }}</span>
            </div>
            <div class="summary-item total">
              <span>应付金额：</span>
              <span class="total-price">￥{{ finalTotal.toFixed(2) }}</span>
            </div>
            <el-button
              type="primary"
              size="large"
              :disabled="selectedItemsCount === 0"
              @click="handleCheckout"
            >
              去结算 ({{ selectedItemsCount }})
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 失效商品列表 -->
    <div class="invalid-items" v-if="invalidItems.length > 0">
      <h3>失效商品</h3>
      <el-table :data="invalidItems" style="width: 100%">
        <el-table-column label="商品" min-width="300">
          <template #default="{ row }">
            <div class="product-info">
              <img
                :src="row.shoes?.productImageUrl || row.productImage || '/placeholder-product.jpg'"
                :alt="row.shoes?.name || row.productName || '商品'"
                class="product-image"
              />
              <div class="product-details">
                <h3 class="product-name">{{ row.shoes?.name || row.productName || '未知商品' }}</h3>
                <p class="invalid-reason">{{ row.invalidReason || '商品已下架' }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleRemoveInvalidItem(row.id || row.cartItemId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 你可能喜欢 -->
    <div class="recommendations" v-if="!cartStore.isEmpty">
      <h2>你可能喜欢</h2>
      <p class="recommendations-subtitle">基于购物车中的品牌为您推荐</p>
      
      <div class="products-grid">
        <ProductCard
          v-for="product in recommendedProducts"
          :key="product.productId"
          :product="product"
          @add-to-cart="handleAddToCart"
        />
      </div>
      
      <!-- 如果没有推荐商品，显示提示 -->
      <div v-if="recommendedProducts.length === 0" class="no-recommendations">
        <p>暂无推荐商品</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCartStore } from '@/stores/cart'
import { useAuthStore } from '@/stores/auth'
import { productService, cartService, stockService } from '@/api'
import ProductCard from '@/components/ProductCard.vue'
import type { CartItem, Product, Shoes, ProductVO } from '@/types'
import { createLogger } from '@/utils/logger'

const router = useRouter()
const route = useRoute()
const cartStore = useCartStore()
const authStore = useAuthStore()
const cartLogger = createLogger('CartPage')

// 响应式数据
const loading = ref(false)
const selectedItems = ref<CartItem[]>([])
const invalidItems = ref<CartItem[]>([])
const recommendedProducts = ref<Product[]>([])
const cartTable = ref()

// 计算属性
const selectedItemsCount = computed(() =>
  selectedItems.value.reduce((sum, item) => sum + item.quantity, 0),
)

const selectedItemsTotal = computed(() =>
  selectedItems.value.reduce((sum, item) => {
    const price =
      (item.stock as any)?.discountPrice || (item.stock as any)?.price || item.price || 0
    return sum + price * item.quantity
  }, 0),
)

const discountAmount = computed(() => {
  // 这里可以添加优惠券等折扣逻辑
  return 0
})

const finalTotal = computed(() => selectedItemsTotal.value - discountAmount.value)

const selectAll = computed({
  get: () => {
    if (cartStore.items.length === 0) return false
    return selectedItems.value.length === cartStore.items.length
  },
  set: (value) => {
    if (value) {
      selectedItems.value = [...cartStore.items]
    } else {
      selectedItems.value = []
    }
  },
})

const isIndeterminate = computed(
  () => selectedItems.value.length > 0 && selectedItems.value.length < cartStore.items.length,
)

// 方法
const loadCartData = async () => {
  loading.value = true
  try {
    await cartStore.loadCart()
    if (authStore.isLoggedIn) {
      await loadInvalidItems()
      await loadRecommendations()
      
      // 【重要】处理立刻购买跳转过来的自动选中逻辑
      // 如果URL中包含selectSku参数，自动选中对应的商品
      // ⚠️ 请勿删除此逻辑，否则会影响立刻购买功能的用户体验
      await handleAutoSelectFromUrl()
    }
  } catch (error) {
    cartLogger.error('加载购物车数据失败:', error)
    ElMessage.error('加载购物车失败')
  } finally {
    loading.value = false
  }
}

const loadInvalidItems = async () => {
  // 检查登录状态
  if (!authStore.isLoggedIn) {
    invalidItems.value = []
    return
  }

  try {
    const response = await cartService.getInvalidItems()
    invalidItems.value = response.data.data || []
  } catch (error) {
    cartLogger.error('加载无效商品失败:', error)
    invalidItems.value = []
  }
}

const loadRecommendations = async () => {
  try {
    // 获取购物车中商品的品牌信息
    const cartBrands = new Set<string>()
    cartStore.items.forEach((item: any) => {
      // 修复品牌名称获取逻辑 - 使用正确的字段名
      const brandName = item.brand?.brand_name || item.brand?.brandName || item.shoes?.brand?.brand_name || item.shoes?.brand?.brandName
      if (brandName) {
        cartBrands.add(brandName)
      }
    })
    
    const recommendedProductsData: Product[] = []
    
    if (cartBrands.size > 0) {
      // 如果有品牌信息，优先推荐相关商品
      const brandNames = Array.from(cartBrands)
      for (const brandName of brandNames) {
        try {
          // 使用品牌名称搜索相关商品
          const response = await productService.searchProducts(brandName, 1, 8)
          
          // 修复数据路径 - 使用正确的字段名
          const products = Array.isArray(response.data?.data?.list) ? response.data.data.list : 
                         Array.isArray(response.data?.data) ? response.data.data : []
          
          const validProducts = products.filter((product: any) => 
            product && product.shoeId && 
            !cartStore.items.some((cartItem: any) => 
              cartItem.shoes?.shoeId === product.shoeId ||
              cartItem.shoeId === product.shoeId
            )
          )
          recommendedProductsData.push(...validProducts)
        } catch (error) {
          cartLogger.warn(`加载品牌 ${brandName} 推荐商品失败:`, error)
        }
      }
    }
    
    // 无论是否有品牌信息，都加载一些热门商品
    try {
      const response = await productService.searchProducts('', 1, 8)
      
      // 修复数据路径 - 使用正确的字段名
      const products = Array.isArray(response.data?.data?.list) ? response.data.data.list : 
                     Array.isArray(response.data?.data) ? response.data.data : []
      
      const validProducts = products.filter((product: any) => 
        product && product.shoeId && 
        !cartStore.items.some((cartItem: any) => 
          cartItem.shoes?.shoeId === product.shoeId ||
          cartItem.shoeId === product.shoeId
        ) &&
        !recommendedProductsData.some(recProduct => 
          recProduct.shoeId === product.shoeId
        )
      )
      recommendedProductsData.push(...validProducts)
    } catch (error) {
      cartLogger.warn('加载热门推荐商品失败:', error)
    }
    
    // 随机打乱并限制数量
    recommendedProducts.value = recommendedProductsData
      .sort(() => Math.random() - 0.5)
      .slice(0, 4)
      
  } catch (error) {
    cartLogger.error('加载推荐商品失败:', error)
    recommendedProducts.value = []
  }
}

const handleSelectionChange = (selection: CartItem[]) => {
  selectedItems.value = selection
}

// 【重要】处理立刻购买跳转过来的自动选中功能
// 根据URL参数selectSku自动选中指定的商品
// ⚠️ 请勿删除此函数，否则会影响立刻购买功能的完整性
const handleAutoSelectFromUrl = async () => {
  const selectSkuId = route.query.selectSku
  if (!selectSkuId) return
  
  try {
    // 等待DOM更新
    await nextTick()
    
    // 查找对应的购物车商品
    const targetItem = cartStore.items.find((item: any) => {
      // 匹配SKU，支持多种可能的字段名
      const sku = item.skuId || item.sku
      return sku && sku.toString() === selectSkuId.toString()
    })
    
    if (targetItem && cartTable.value) {
      // 自动选中该商品
      selectedItems.value = [targetItem]
      cartTable.value.toggleRowSelection(targetItem, true)
      
      cartLogger.info('自动选中立刻购买的商品:', {
        skuId: selectSkuId,
        itemId: targetItem.cartItemId,
        productName: (targetItem as any).shoes?.name || targetItem.productName
      })
      
      // 清除URL参数，避免重复处理
      router.replace({ path: '/cart' })
    } else {
      cartLogger.warn('未找到要自动选中的商品:', { selectSkuId })
    }
  } catch (error) {
    cartLogger.error('自动选中商品失败:', error)
  }
}

const handleSelectAll = (selected: boolean) => {
  const table = cartTable.value
  if (!table) return

  if (selected) {
    // 全选：选中所有行
    cartStore.items.forEach((item) => {
      table.toggleRowSelection(item, true)
    })
  } else {
    // 取消全选：清除所有选择
    table.clearSelection()
  }
}

const handleQuantityChange = async (item: CartItem, newQuantity: number) => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  // 验证数量参数
  if (!newQuantity || newQuantity <= 0 || !Number.isInteger(newQuantity)) {
    ElMessage.error('请输入有效的商品数量')
    return
  }

  const result = await cartStore.updateQuantity(item.cartItemId, newQuantity)
  if (result.success) {
    ElMessage.success('已更新商品数量')
  } else {
    ElMessage.error(result.error || '更新失败')
  }
}

const handleRemoveItem = async (cartItemId: number) => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  ElMessageBox.confirm('确定要删除这个商品吗？', '删除商品', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const result = await cartStore.removeFromCart(cartItemId)
    if (result.success) {
      ElMessage.success('已删除商品')
    } else {
      ElMessage.error(result.error || '删除失败')
    }
  })
}

const handleRemoveInvalidItem = async (cartItemId: number) => {
  const result = await cartStore.removeFromCart(cartItemId)
  if (result.success) {
    await loadInvalidItems()
    ElMessage.success('已删除失效商品')
  }
}

const handleClearInvalidItems = async () => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  if (invalidItems.value.length === 0) {
    ElMessage.info('暂无失效商品')
    return
  }

  ElMessageBox.confirm(`确定要清除 ${invalidItems.value.length} 个失效商品吗？`, '清除失效商品', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const cartItemIds = invalidItems.value.map((item) => item.cartItemId)
    try {
      const response = await cartService.batchRemoveFromCart(cartItemIds)
      const ok = (response as any)?.data?.code === 200
      if (ok) {
        await loadInvalidItems()
        await cartStore.loadCart()
        ElMessage.success('已清除失效商品')
      } else {
        ElMessage.error('清除失败')
      }
    } catch (e) {
      ElMessage.error('清除失败')
    }
  })
}

const handleClearCart = async () => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  if (cartStore.items.length === 0) {
    ElMessage.info('购物车为空')
    return
  }

  ElMessageBox.confirm('确定要清空购物车吗？', '清空购物车', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const result = await cartStore.clearCart()
    if (result.success) {
      ElMessage.success('已清空购物车')
      selectedItems.value = []
    } else {
      ElMessage.error(result.error || '清空失败')
    }
  })
}

const handleAddToCart = async (product: Product | Shoes | ProductVO) => {
  if (!authStore.isLoggedIn) {
    // 使用正确的方法名
    authStore.openLogin()
    return
  }

  try {
    // 根据产品类型处理
    if ('shoeId' in product) {
      // Shoes 或 ProductVO 类型
      await cartStore.addToCart(product.shoeId, 1)
    } else {
      // Product 类型
      await cartStore.addToCart(product.productId, 1)
    }
    
    ElMessage.success('已添加到购物车')
  } catch (error) {
    cartLogger.error('添加到购物车失败:', error)
    ElMessage.error('添加到购物车失败')
  }
}

const handleCheckout = async () => {
  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  if (selectedItems.value.length === 0) {
    ElMessage.warning('请选择要购买的商品')
    return
  }

  // 通过库存查询接口校验库存（按 鞋/尺码/颜色）
  try {
    const withStock = selectedItems.value.filter(
      (item) => typeof item.stock === 'object' && item.stock,
    )
    if (withStock.length > 0) {
      const results = await Promise.all(
        withStock.map(async (item) => {
          const s = item.stock as any
          const params = { shoeId: s.shoeId, sizeId: s.sizeId, colorId: s.colorId }
          const res = await stockService.getQuantity(params)
          const available = (res.data as any)?.data?.stockQuantity ?? 0
          return { item, params, required: item.quantity, available }
        }),
      )

      const insufficient = results.filter((r) => r.available < r.required)
      if (insufficient.length > 0) {
        ElMessage.warning('部分商品库存不足，请调整数量')
        return
      }
    }
  } catch (e) {
    ElMessage.error('库存校验失败，请稍后重试')
    return
  }

  // 【重要】将选中商品信息传递给结算页面
  // 由于后端选中状态API未实际存储数据，使用sessionStorage临时存储
  // ⚠️ 请勿删除此逻辑，否则会导致结算页面显示"购物车为空"
  try {
    // 将选中的商品ID列表存储到sessionStorage
    const selectedCartItemIds = selectedItems.value.map(item => item.cartItemId)
    sessionStorage.setItem('checkoutSelectedItems', JSON.stringify(selectedCartItemIds))
    
    cartLogger.info('准备跳转结算页面:', { 
      selectedCount: selectedItems.value.length,
      selectedIds: selectedCartItemIds 
    })
    
    // 跳转到结算页面
    router.push('/checkout')
  } catch (error) {
    console.error('跳转结算页面失败:', error)
    ElMessage.error('跳转结算页面失败，请稍后重试')
  }
}

// 页面加载
onMounted(() => {
  loadCartData()
})
</script>

<style scoped lang="scss">
.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }
  }

  .cart-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;

    .empty-cart {
      padding: 60px 0;
    }

    .cart-section {
      .cart-list {
        margin-bottom: 20px;

        .product-info {
          display: flex;
          align-items: center;
          gap: 15px;

          .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
          }

          .product-details {
            .product-name {
              margin: 0 0 5px 0;
              font-size: 14px;
              color: #333;
            }

            .product-spec {
              margin: 0;
              font-size: 12px;
              color: #666;
            }

            .invalid-reason {
              margin: 0;
              font-size: 12px;
              color: #ff4d4f;
            }
          }
        }

        .price,
        .subtotal {
          font-weight: bold;
          color: #333;
        }
      }

      .cart-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 0;
        gap: 20px;

        .cart-actions {
          display: flex;
          align-items: center;
          gap: 20px;
          flex-wrap: wrap;

          .el-checkbox {
            white-space: nowrap;
          }

          .el-button {
            white-space: nowrap;
          }
        }

        .cart-summary {
          display: flex;
          align-items: center;
          gap: 20px;
          flex-wrap: wrap;

          .summary-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #666;
            white-space: nowrap;

            .highlight {
              color: #409eff;
              font-weight: bold;
            }

            .price {
              color: #ff4d4f;
              font-weight: bold;
            }

            .discount {
              color: #52c41a;
              font-weight: bold;
            }

            &.total {
              font-size: 16px;
              font-weight: bold;

              .total-price {
                font-size: 20px;
                color: #ff4d4f;
              }
            }
          }

          .el-button {
            height: 48px;
            padding: 0 24px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 0;
            background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
            border: none;
            transition: all 0.3s ease;

            &:hover:not(:disabled) {
              transform: translateY(-2px);
              box-shadow: 0 6px 20px rgba(255, 90, 0, 0.3);
            }

            &:active:not(:disabled) {
              transform: translateY(0);
            }

            &:disabled {
              background: #d9d9d9;
              color: #999;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }

  .invalid-items {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;

    h3 {
      margin: 0 0 20px 0;
      color: #ff4d4f;
    }
  }

  .recommendations {
    background: white;
    border-radius: 8px;
    padding: 20px;

    h2 {
      margin: 0 0 20px 0;
      font-size: 20px;
      color: #333;
    }

    .recommendations-subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
    }

    .debug-info {
      margin-bottom: 15px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
    }

    .no-recommendations {
      text-align: center;
      padding: 20px;
      color: #999;
      font-style: italic;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }
  }
}

.recommendations-section {
  margin-top: 40px;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 0;
  border: 1px solid #e9ecef;

  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
  }

  .recommendations-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;

    .product-card {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: #ff5a00;
      }

      .product-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        background: #f8f9fa;
      }

      .product-info {
        padding: 16px;

        .product-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .product-price {
          font-size: 18px;
          font-weight: 600;
          color: #ff5a00;
          margin-bottom: 12px;
        }

        .add-to-cart-btn {
          width: 100%;
          height: 40px;
          background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
          border: none;
          border-radius: 0;
          color: white;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(255, 90, 0, 0.3);
          }

          &:active {
            transform: translateY(0);
          }
        }
      }
    }
  }

  .no-recommendations {
    text-align: center;
    padding: 40px 20px;
    color: #666;

    .no-recommendations-icon {
      font-size: 48px;
      color: #ddd;
      margin-bottom: 16px;
    }

    .no-recommendations-text {
      font-size: 16px;
      color: #999;
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .cart-container {
    padding: 15px;

    .cart-content {
      padding: 15px;

      .cart-footer {
        flex-direction: column;
        gap: 20px;
        padding: 20px;

        .cart-actions {
          justify-content: center;
          gap: 15px;
          width: 100%;

          .el-checkbox {
            font-size: 14px;
          }

          .el-button {
            font-size: 13px;
            padding: 8px 12px;
          }
        }

        .cart-summary {
          flex-direction: column;
          gap: 15px;
          align-items: center;
          width: 100%;

          .summary-item {
            font-size: 13px;
            justify-content: space-between;
            width: 100%;
            max-width: 300px;

            &.total {
              font-size: 15px;

              .total-price {
                font-size: 18px;
              }
            }
          }

          .el-button {
            width: 100%;
            max-width: 300px;
            height: 44px;
            font-size: 15px;
            padding: 0 20px;
          }
        }
      }
    }
  }

  .recommendations-section {
    margin-top: 30px;
    padding: 20px;

    h2 {
      font-size: 20px;
    }

    .recommendations-subtitle {
      font-size: 13px;
      margin-bottom: 25px;
    }

    .products-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;

      .product-card {
        .product-image {
          height: 160px;
        }

        .product-info {
          padding: 12px;

          .product-name {
            font-size: 14px;
            margin-bottom: 6px;
          }

          .product-price {
            font-size: 16px;
            margin-bottom: 10px;
          }

          .add-to-cart-btn {
            height: 36px;
            font-size: 14px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .cart-container {
    padding: 10px;

    .cart-content {
      padding: 10px;

      .cart-footer {
        padding: 15px;
        gap: 15px;

        .cart-actions {
          gap: 10px;
          flex-wrap: wrap;
          justify-content: center;

          .el-checkbox {
            font-size: 13px;
            margin-bottom: 5px;
          }

          .el-button {
            font-size: 12px;
            padding: 6px 10px;
            margin-bottom: 5px;
          }
        }

        .cart-summary {
          gap: 12px;

          .summary-item {
            font-size: 12px;
            max-width: 280px;

            &.total {
              font-size: 14px;

              .total-price {
                font-size: 16px;
              }
            }
          }

          .el-button {
            max-width: 280px;
            height: 40px;
            font-size: 14px;
            padding: 0 16px;
          }
        }
      }
    }
  }

  .recommendations-section {
    margin-top: 25px;
    padding: 15px;

    h2 {
      font-size: 18px;
    }

    .recommendations-subtitle {
      font-size: 12px;
      margin-bottom: 20px;
    }

    .products-grid {
      grid-template-columns: 1fr;
      gap: 12px;

      .product-card {
        .product-image {
          height: 140px;
        }

        .product-info {
          padding: 10px;

          .product-name {
            font-size: 13px;
          }

          .product-price {
            font-size: 15px;
          }

          .add-to-cart-btn {
            height: 32px;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
